<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3外观漂亮淡入淡出Tab菜单演示</title>
<link rel="stylesheet" href="css/tabs.css" media="screen" type="text/css">
</head>
<body>
	<div style="text-align: center; clear: both;"></div>
	<article class="tabs">
		<input checked id="one" name="tabs" type="radio"> <label for="one">Tab One</label>
		<input id="two" name="tabs" type="radio" value="Two"> <label for="two">Tab Two</label>
		<input id="three" name="tabs" type="radio"> <label for="three">Tab Three</label>
		<input id="four" name="tabs" type="radio"> <label for="four">Tab Four</label>

		<div class="panels">
			<div class="panel">
				<h2>This is Panel One</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Mauris vel leo sem. Sed nec quam sit amet lorem volutpat
					ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed
					dui auctor vehicula quis a dui.</p>

				<p>Aliquam vitae leo et sapien volutpat accumsan quis eget
					turpis. Etiam ac metus vitae purus semper pretium. Curabitur id
					nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed
					dolor.</p>

				<p>Nam sodales, mi eu convallis adipiscing, ligula justo
					consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut
					elementum ultricies orci, vel luctus neque varius in. Phasellus
					turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
			</div>

			<div class="panel">
				<h2>This is Panel Two</h2>
				<p>Aliquam vitae leo et sapien volutpat accumsan quis eget
					turpis. Etiam ac metus vitae purus semper pretium. Curabitur id
					nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed
					dolor.</p>

				<p>Nam sodales, mi eu convallis adipiscing, ligula justo
					consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut
					elementum ultricies orci, vel luctus neque varius in. Phasellus
					turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
			</div>

			<div class="panel">
				<h2>This is Panel Three</h2>
				<p>Nam sodales, mi eu convallis adipiscing, ligula justo
					consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut
					elementum ultricies orci, vel luctus neque varius in. Phasellus
					turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Mauris vel leo sem. Sed nec quam sit amet lorem volutpat
					ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed
					dui auctor vehicula quis a dui.</p>

				<p>Aliquam vitae leo et sapien volutpat accumsan quis eget
					turpis. Etiam ac metus vitae purus semper pretium. Curabitur id
					nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed
					dolor.</p>
			</div>

			<div class="panel">
				<h2>This is Panel Four</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Mauris vel leo sem. Sed nec quam sit amet lorem volutpat
					ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed
					dui auctor vehicula quis a dui.</p>

				<p>Aliquam vitae leo et sapien volutpat accumsan quis eget
					turpis. Etiam ac metus vitae purus semper pretium. Curabitur id
					nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed
					dolor.</p>
			</div>
		</div>
	</article>
</body>
</html>